<template>
    <div class='top'>
        <div class='address'>
            <div class='address-v'>
                <i class='iconfont icon-dingwei'></i>
                <span v-text="address"></span>
                <i class='iconfont icon-xiajiantou'></i>
            </div>
            <div class='weather'>
                <div class='temperature'>
                    <p>{{ gettemperature.temperature }}<sup>o</sup></p>
                    <span>{{ gettemperature.description }}</span>
                </div>
                <img  :src='gettemperature.image_hash' />
            </div>
        </div>

        <div class='search'>
            <input type="text" placeholder="搜索商家、商品" />
        </div>

        <div class='top-nav'>
            <a :key='index' v-for='(item,index) in headNavlist'>{{ item.word }}</a>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
// import { mapState } from 'vuex'
export default {
  name:'Headtop',
  data(){
    return {
        headNavlist:[], 
        gettemperature:'', 
    }
  },
  computed:{
      ...mapState(['address'])
  },
  created(){

      if(window.localStorage.gettemperature){
          this.gettemperature = JSON.parse(window.localStorage.gettemperature);
        //   console.log(this.gettemperature)
      }else{
            var that=this;
            //获取天气
            axios.get('http://localhost:3000/weather', {
                params:{
                    latitude:22.58846,
                    longitude:113.97459
                }
            }).then(function(res){
                if(res){
                        
                        var weatherObj=res.data;
                        
                        var a = weatherObj.image_hash.split('');
                        a.splice(1,0,'/');
                        a.splice(4,0,'/');
                       
                        weatherObj.image_hash='https://fuss10.elemecdn.com/'+a.join('') + '.png?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/';
                        that.gettemperature = weatherObj;
                        // console.log(that.gettemperature)
                        //将天气的数据存储起来
                        window.localStorage.gettemperature = JSON.stringify(weatherObj);
                }
            }).catch(function(err){
                console.log(err)
            })
      }
    //将热搜的数据存储起来localStorage  
    if(window.localStorage.headNavlist){
        this.headNavlist = JSON.parse(window.localStorage.headNavlist);
    }else{
        var that=this;
        //获取搜索框下面的nav
        axios.get('http://localhost:3000/hot_search',{
            params:{
                latitude:22.58846,
                longitude:113.97459
            }
        }).then(function(res){
            // console.log(that.headNav)
            if(res){
                that.headNavlist = res.data;
                window.localStorage.headNavlist = JSON.stringify(res.data);
            }       
        }).catch(function(err){
            console.log(err)
        })
    }  
    
  },
//   mounted:{
//       ...mapState(['gettemperature'])
//   }


}
</script>

<style lang="scss" scoped>
    @import '../../../static/hotcss/px2rem.scss';
    .top{
        width: 100%;
        height:px2rem(244);
        background-color: #0085ff;
        box-sizing: border-box;
        padding: px2rem(20) px2rem(28);
        .address{
            height: px2rem(69);
            display: flex;
            .address-v{
                width: 60%;
                display: flex;
                color: #FFF;
                line-height: px2rem(69);
                span{
                    max-width: px2rem(333);
                    box-sizing: border-box;
                    padding: 0 px2rem(10);
                    font-size: px2rem(35);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                i:nth-child(1){
                    font-size: px2rem(30);
                }
                i:nth-child(3){
                    font-size: px2rem(25);
                    position: relative;
                    // left: px2rem(-10);
                }
            }
            .weather{
                flex: 1;
                display: flex; 
                justify-content: flex-end; 
                align-items: center;
                .temperature{
                    color: #FFF;    
                    font-size: px2rem(24); 
                    p{
                        font-size: px2rem(28);
                    }
                }  
                img{
                    width: px2rem(54);
                    height: px2rem(54);
                    margin-left: px2rem(8);
                }
            }
        }

        .search{
            height: px2rem(102);
            box-sizing: border-box;
            padding: px2rem(15) 0;
            width: 100%;
            input{
                width: 100%;
                height: px2rem(72);
                background-color: #FFF;
                border: 0;
                border-radius: px2rem(35);
                font-size: px2rem(26);
                color:#000;
                line-height: px2rem(72);
                text-align: center;
                outline: none;
            }
        }
        .top-nav{
            width: 100%;
            // height: px2rem(29);
            white-space: nowrap;
            overflow: auto;
            position: relative;
            top:px2rem(-20);
            // ul{
            //     display: flex;
            //     // width: 100%;
            //     width: px2rem()
            //     height: px2rem(28);
            //     overflow: hidden;
            //     li{
            //         padding-right: px2rem(30);
            //         font-size: px2rem(26);
            //         line-height: px2rem(28);
            //         color: #FFF;
            //     }
            // }
            a{
                padding-right: px2rem(30);
                font-size: px2rem(24);
                line-height: px2rem(28);
                color: #FFF;
            }
        }
    }


</style>
